<template>
  <div>
    <p>{{pos+1}}.{{title}}</p>

    <div @click="onOptionClick(opt)" class="optionItem" v-for="opt in options">
      <span class="optionName">{{opt['resultOption']}}</span>
      <span class="optionContent">{{opt['selectOption']}}</span>
    </div>
  </div>
</template>

<script>
  import EvaluationAPI from "../../repo/api/EvaluationAPI";
  import {push} from "../../router/util";
  import {Toast} from "vant";

  export default {
    name: "evaluation-test",
    data() {
      return {
        questions: [],
        pos: 0,
        answers: [],
      }
    },
    computed: {
      param() {
        return this.$route.params;
      },
      evaluationId() {
        return this.param.evaluationId;
      },
      questionSize() {
        return this.questions.length;
      },
      currQuestion() {
        return this.questions[this.pos] || {}
      },
      title() {
        return this.currQuestion['title'] || ''
      },
      options() {
        return this.currQuestion['selectOptionList'] || []
      },
    },
    created() {
      EvaluationAPI.getEvaluateById(this.evaluationId)
        .then((result) => {
          this.answers.length = 0;
          this.pos = 0;
          this.questions = result.responseData.questions || [];
        })
    },
    methods: {
      onOptionClick(opt) {
        if (this.answers.length === this.questionSize) {
          this.answers.splice(this.questionSize - 1, 1)
        }
        this.answers.push({q: this.currQuestion.id, r: opt['resultOption']});
        if (this.pos < this.questionSize - 1) {
          this.pos++;
        } else {
          this.submit()
        }
      },
      submit() {
        Toast.loading({
          duration: 0,
          message: '正在提交',
          forbidClick: true,
        });
        EvaluationAPI.submitEvaluateAnswer(this.evaluationId, this.answers)
          .then(_ => {
            push(`/evaluation-report/${this.evaluationId}/0`)
          })
          .finally(() => {
            Toast.clear()
          })

      }
    },
  }
</script>

<style scoped>
  p:nth-child(1) {
    margin: 32px 24px 24px 24px;
    font-size: 18px;
    color: #323334;
  }

  .optionItem {
    padding: 16px;
    margin: 0 16px 16px;
    background-color: #F2F5F8;
    color: #323334;
  }

  .optionItem:active {
    color: #1DA1F2;
    background-color: #CDECFF;
    opacity: 0.5;
    transition: 0s;
  }

  .optionName {
    font-size: 18px;
  }

  .optionContent {
    font-size: 14px;
  }
</style>
